---
layout: example
categories: example/v1.0.0
version: v1.0.0
title: Toggling UI
description: Enable or disable map UI controls.
tags:
  - ui
---
<link href='{{site.tileApi}}/mapbox.js/plugins/leaflet-fullscreen/v0.0.4/leaflet.fullscreen.css' rel='stylesheet' />
<script src='{{site.tileApi}}/mapbox.js/plugins/leaflet-fullscreen/v0.0.4/Leaflet.fullscreen.min.js'></script>
<script src='{{site.tileApi}}/mapbox.js/plugins/leaflet-hash/v0.2.1/leaflet-hash.js'></script>

<style>
.menu-ui {
  background:#fff;
  position:absolute;
  top:10px;right:10px;
  z-index:1;
  border-radius:3px;
  width:120px;
  border:1px solid rgba(0,0,0,0.4);
  }
  .menu-ui a {
    font-size:13px;
    color:#404040;
    display:block;
    margin:0;padding:0;
    padding:5px 10px;
    text-decoration:none;
    border-bottom:1px solid rgba(0,0,0,0.25);
    text-align:center;
    }
    .menu-ui a:first-child {
      border-radius:3px 3px 0 0;
      }
    .menu-ui a:last-child {
      border:none;
      border-radius:0 0 3px 3px;
      }
    .menu-ui a:hover {
      background:#f8f8f8;
      color:#404040;
      }
    .menu-ui a.active {
      background:#3887BE;
      color:#FFF;
      }
      .menu-ui a.active:hover {
        background:#3074a4;
        }
</style>
<div id='map'>
<nav class='menu-ui'>
  <a href='#' id='grid' class='active'>Interactivity</a>
  <a href='#' id='legend'>Legend</a>
  <a href='#' id='zoomer' class='active'>Zoomer</a>
  <a href='#' id='fullscreen'>Fullscreen</a>
  <a href='#' id='attribution' class='active'>Attribution</a>
  <a href='#' id='hash'>Hash</a>
  <a href='#' id='geocoder'>Geocoder</a>
  <a href='#' id='infocontrol'>Info Control</a>
</nav>
</div>
<script>
var map = L.mapbox.map('map', 'mapbox.streets', {attributionControl: true})
    .setView([38.82, -94.96], 4);

var tileLayer = L.mapbox.tileLayer('examples.npr-stations')
    .addTo(map);
var gridLayer = L.mapbox.gridLayer('examples.npr-stations')
    .addTo(map);
var gridControl = L.mapbox.gridControl(gridLayer, {follow: true})
    .addTo(map);

map.getContainer().querySelector('#grid').onclick = function() {
    if (this.className === 'active') {
        map.removeLayer(tileLayer);
        map.removeLayer(gridLayer);
        map.removeControl(gridControl);
        this.className = '';
    } else {
        map.addLayer(tileLayer);
        map.addLayer(gridLayer);
        map.addControl(gridControl);
        this.className = 'active';
    }
    return false;
};

var legend = 'Data from Robert Kieffer.';

map.getContainer().querySelector('#legend').onclick = function() {
    if (this.className === 'active') {
        map.legendControl.removeLegend(legend);
        this.className = '';
    } else {
        map.legendControl.addLegend(legend);
        this.className = 'active';
    }
    return false;
};

var fullscreenControl = new L.Control.Fullscreen();
var hash = L.hash();

// Connect check boxes to ui functions
function toggle(control, element) {
    if (element.className === 'active') {
        control.removeFrom(map);
        element.className = '';
    } else {
        control.addTo(map);
        element.className = 'active';
    }
}

map.getContainer().querySelector('#zoomer').onclick = function() {
    toggle(map.zoomControl, this);
    return false;
};

map.getContainer().querySelector('#fullscreen').onclick = function() {
    toggle(fullscreenControl, this);
    return false;
};

map.getContainer().querySelector('#attribution').onclick = function() {
    toggle(map.attributionControl, this);
    return false;
};

map.getContainer().querySelector('#hash').onclick = function() {
    if (this.className === 'active') {
        hash.removeFrom(map);
        this.className = '';
    } else {
        hash.init(map);
        this.className = 'active';
    }
    return false;
};

var geocode = L.mapbox.geocoderControl('mapbox.places');

map.getContainer().querySelector('#geocoder').onclick = function() {
    if (this.className === 'active') {
        map.removeControl(geocode);
        this.className = '';
    } else {
        map.addControl(geocode);
        this.className = 'active';
    }
    return false;
};

var info = L.mapbox.infoControl();

map.getContainer().querySelector('#infocontrol').onclick = function() {
    if (this.className === 'active') {
        map.removeControl(info);
        this.className = '';
    } else {
        map.addControl(info);
        this.className = 'active';
    }
    return false;
};
</script>
